import 'package:ez_ic_led/commont/bg_bar_view.dart';
import 'package:ez_ic_led/commont/color_grid.dart';
import 'package:flutter/material.dart';
import 'package:flutter_kit_audio/flutter_kit_audio.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

import '../commont/custom_pickerview.dart';
import '../tool/assets.dart';

class CustomView extends StatefulWidget {
  int selectType = 100;
  int selectModeIndex = 0;
  List<int> colorList = [0, 0, 0, 0, 0, 0, 0, 0, 0];
  Function(int) onChangedType;
  Function(int) onChangedMode;
  Function(int, bool) onChangedColor;
  CustomView(
      {super.key,
      required this.selectType,
      required this.selectModeIndex,
      required this.colorList,
      required this.onChangedType,
      required this.onChangedMode,
      required this.onChangedColor});

  @override
  State<CustomView> createState() => _CustomViewState();
}

class _CustomViewState extends State<CustomView> {
  double gap = 10;
  final List<List<String>> _items = [
    [
      'Gradient',
      'Mottion trail',
      'Flowing effect',
      'Chasing light',
      'Stacking',
      'Curtain effect',
      'Flowing flow',
      'Running'
    ]
  ];
  final List<String> _typeList = ['Forward', 'Change color', 'Backward', 'Cycle'];
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (BuildContext context, BoxConstraints constriants) {
      return BgBarView(
          barTag: assets.Custom_btn,
          child: Container(
            color: Colors.transparent,
            child: Row(
              children: [
                SizedBox(width: gap),

                ///左
                Flexible(
                  flex: 1,
                  child: ColorGrid(
                      list: _typeList,
                      withHighLight: (p0) => widget.selectType == p0,
                      withChild: (index, text) {
                        return InkWell(
                          onTap: () {
                            setState(() => widget.selectType = index);
                            widget.onChangedType(index);
                          },
                          child: Container(
                            decoration:
                                widget.selectType != index ? null : const BoxDecoration(gradient: localGradient),
                            child: Center(
                              child: Text(
                                text,
                                textAlign: TextAlign.center,
                                style: const TextStyle(fontSize: 11, color: Colors.white),
                              ),
                            ),
                          ),
                        );
                      }),
                ),
                SizedBox(width: gap),

                ///中
                Flexible(
                    flex: 1,
                    child: CustomPickerview(
                        items: _items,
                        selectIndexs: [widget.selectModeIndex],
                        onChanged: (p0, p1) {
                          widget.onChangedMode(p1);
                          FlutterKitAudio.customSound(soundType: FlutterKitAudioCustomSoundType.click18);
                        })),
                SizedBox(width: gap),

                ///右
                Flexible(
                    flex: 1,
                    child: ColorGrid(
                      crossAxisCount: 3,
                      list: widget.colorList,
                      withHighLight: (p0) => widget.colorList[p0] != 0,
                      withChild: (index, color) {
                        Color bgColor;
                        if (color == 0) {
                          bgColor = Colors.transparent;
                        } else {
                          var colorBytes = (color as int).bytes;
                          colorBytes = colorBytes.padLeft(3);
                          bgColor = Color.fromARGB(0xFF, colorBytes[0], colorBytes[1], colorBytes[2]);
                        }
                        return InkWell(
                          onTapUp: (details) => widget.onChangedColor(index, true),
                          onLongPress: () => widget.onChangedColor(index, false),
                          child: Container(color: bgColor),
                        );
                      },
                    )),
                SizedBox(width: gap),
              ],
            ),
          ));
    });
  }
}
